import React from 'react';
import ReactDOM from 'react-dom';

export class Cart extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const listItems = this.props.cart.length == 0
            ? <span>购物车空空如也</span>
            : this.props.cart.map((item) => {
                return (
                    <div className="card" key={"cart-item-" + item.id + "-" + item.spec}>
                        <div className="card-body">
                            <div style={{ display: 'flex', alignItems: 'baseline' }}>
                                <span>{item.name}</span>
                                <small>&nbsp;×{item.quantity}</small>
                                <span style={{ flex: '1', textAlign: 'right', color: 'red' }}>
                                    <span style={{ fontSize: '10px' }}>￥</span>
                                    <span style={{ fontSize: '16px', fontWeight: 'bold' }}>{((item.price + item.packPrice) * item.quantity).toFixed(2)}</span>
                                </span>
                                <div className="btn-group btn-group-sm" style={{ paddingLeft: '10px' }}>
                                    <button type="button" onClick={() => { this.props.handleRemove(item) }} className="btn btn-secondary btn-sm">
                                        -
                                    </button>
                                    <button type="button" onClick={() => { this.props.handleAdd(item) }} className="btn btn-primary btn-sm">
                                        +
                                    </button>
                                </div>
                            </div>
                            <div>
                                {!item.spec ? '' : <small>{item.spec}</small>}
                            </div>
                        </div>
                    </div>
                );
            })

        let btnTxt = '去下单';
        let canSubmit = this.props.totalPrice >= this.props.startPrice;
        if (this.props.totalPrice < this.props.startPrice) {
            btnTxt = '还差￥' + (this.props.startPrice - this.props.totalPrice).toFixed(2) + "起送"
        }

        return (
            <div style={{ display: 'flex', flexDirection: 'column' }}>
                <h3>购物车</h3>
                <div style={{ flex: '1', padding: '20px 0' }}>{listItems}</div>
                <div className="card" style={{}}>
                    <div className="card-header">
                        <h4>￥{this.props.totalPrice.toFixed(2)}</h4>
                        <span>+ ￥{this.props.shipPrice.toFixed(2)}（配送费）</span>
                    </div>
                    <div className="card-body">
                        <button
                            type="button"
                            onClick={() => { this.props.handleSubmit() }}
                            className="btn btn-primary btn-lg btn-block"
                            disabled={!canSubmit}>{btnTxt}</button>
                    </div>
                </div>
            </div>
        );
    }
}